<div class="content-page">
  <mat-card>
    <mat-card-header>
      <mat-toolbar class="toolbar">
        <span>RC2</span> <span class="toolbar-spacer"></span>
        <mat-button-toggle-group
          [(ngModel)]="flagForButtonToggle"
          (change)="handleText()"
        >
          <mat-button-toggle
            value="ENCODE"
            class="toolbar-button-toggle"
            color="primary"
          >
            Encode
          </mat-button-toggle>
          <mat-button-toggle
            value="DECODE"
            class="toolbar-button-toggle"
            color="accent"
          >
            Decode
          </mat-button-toggle>
        </mat-button-toggle-group>
      </mat-toolbar>
    </mat-card-header>
    <mat-card-content>
      <div class="option-row">
        <mat-form-field style="width: 160px">
          <input
            matInput
            type="text"
            [(ngModel)]="optKey"
            (ngModelChange)="handleText()"
            name="optKey"
            placeholder="Key"
          />
        </mat-form-field>
        <mat-form-field style="width: 160px; margin-left:20px">
          <input
            matInput
            type="text"
            [(ngModel)]="optIV"
            (ngModelChange)="handleText()"
            name="optIV"
            placeholder="IV"
          />
        </mat-form-field>
        <mat-form-field style="width: 80px; margin-left:20px">
          <mat-select
            [(ngModel)]="optOutput"
            (ngModelChange)="handleText()"
            name="optOutput"
            placeholder="Output"
          >
            <mat-option value="BASE64">Base64</mat-option>
            <mat-option value="HEX">Hex</mat-option>
          </mat-select>
        </mat-form-field>
      </div>
      <div class="tow-cols">
        <div>
          <app-text-editor
            class="app-text-editor"
            #txtText1
            (onValueChanged)="handleText()"
            value=""
          ></app-text-editor>
        </div>
        <div>
          <app-text-editor
            class="app-text-editor"
            #txtText2
            syncMenu="true"
            (onValueSynced)="syncText()"
            [(saveAsBinFileMenu)]="binFile"
            value=""
          ></app-text-editor>
        </div>
      </div>
    </mat-card-content>
  </mat-card>
</div>
